<template>
  <div class="header-container">
     <div class="mui-bar mui-bar-nav">
      <span class=" mui-pull-left mui-icon mui-icon-left-nav" @click="goback"></span>
      <span class=" mui-pull-left name-text">{{name}}</span>
      <span class="right">
        <span  class="mui-action-menu mui-icon mui-pull-right action-text" v-if='acitonFlag === 1'>
          {{action}}
        </span>
        <span  class=" mui-pull-right" v-else-if='acitonFlag === 2'>
            <span class="mui-icon mui-icon-search"></span>
            <span class="mui-icon mui-icon-plusempty"></span>
        </span>
        <span v-else-if='acitonFlag === 3' class="mui-pull-right mui-icon mui-icon-more"></span>
        <span v-else-if='acitonFlag === 4' class="mui-pull-right">
          <button type="button" class='mui-btn mui-btn-success confirm-btn'>
            确认{{disablebtn.num > 0 ? `(${disablebtn.num})` : ''}}
          </button>
          <span class="disablebtn" :class="{active: disablebtn.flag}"></span>
        </span>
      </span>
     </div>
  </div>
</template>
<script>
/**
 * 不用这个组件了
 */
  export default {
    props: ['name', 'action', 'disablebtn'],
    data() {
        return {
            // 点击传值进来的头部的名字
            // name: this.name,
            // 点击传值进来的头部的动作
            // action: this.action,
            // 动作的标志， 1:有内容, 2: 显示搜索和+号 3:...
            acitonFlag: 1
        }
    },
    created() {
      // console.log(this.action, 'ppppppppppppppp')
        console.log(this.disablebtn)
        if (this.action === 'search') {
          this.acitonFlag = 2
        } else if (this.action === 'personHead') {
          this.acitonFlag = 3
        } else if (this.action === 'groupHead') {
          this.acitonFlag = 4
        } else if (this.action === '新建') {
          this.acitonFlag = 1
        }
    },
    mounted() {
        this.init()
    },
    methods: {
       goback() {
         this.$router.go(-1)
       },
       init() {
           var self = this
           self.$immui('.header-container').on('tap', '.right', function(e) {
             if (self.action === '添加朋友') {
              //  console.log(111111)
               self.$router.push('/addfriends')
             } else if (self.action === 'personHead') {
                console.log('从底部弹出一个东西来,子组件传给父组件值')
                let showBottomFlag = true
                self.$emit('fucallback', showBottomFlag)
             } else if (self.action === 'groupHead') {
                console.log('确认创建群聊')
                if (self.disablebtn.num > 1) {
                  self.$emit('confirmFun')
                } else {
                  self.$immui.toast('选择的好友不能少于一人', {duration: 'short', type: 'div'})
                }
              }
            })
       },
       buildFun(text) {
           console.log(text)
           if (text === '添加朋友') {
            //    this.$router.push('')
           } else if (text === '新建') {

           }
       }
     }
  }
</script>
<style lang='scss' scoped>
.name-text{
    display: inline-block;
    line-height: 46px;
}
.action-text{
    display: inline-block;
    height: 46px;
    padding-top: 0;
    line-height: 46px;
    font-size: 16px;
}
.confirm-btn{
  position: absolute;
  right: 10px;
  top: 7px;
  width: 62px;
  height: 33px;
  padding: 6px;
  z-index: 10;
}
.disablebtn{
  position: absolute;
  right: 10px;
  top: 7px;
  width: 62px;
  height: 33px;
  background: rgba(223, 221, 221, 0.5);
  z-index: 13;
  &.active{
    display: none;
  }
}
</style>
